<template>
  <div class="store-info">
    <h1 class="store-name">{{ store.name }}</h1>
    <div class="info-item">
<!--      //strong标签用于突出显示包围元素-->
      <strong>地址:</strong>
      <span>{{ store.address }}</span>
    </div>
    <div class="info-item">
      <strong>联系方式:</strong>
      <span>{{ store.contact }}</span>
    </div>
    <div class="info-item">
      <strong>店长:</strong>
      <span>{{ store.manager }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      store: {
        name: '天之道足浴',           // 店铺名称
        address: '北京市东城区王府井', // 地址
        contact: '010-123-8888',       // 联系方式
        manager: '王富贵'                // 店长名字
      }
    };
  },
  created() {
    this.fetchStoreData();
  },
  methods: {
    async fetchStoreData() {
      try {
        const response = await this.$http.get('/api/store'); // 替换为正确的API
        this.store = response.data;
      } catch (error) {
        console.error('获取店铺信息失败', error);
      }
    }
  }
};
</script>

<style scoped>
.store-info {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.store-name {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

strong {
  color: #555;
}

span {
  color: #777;
}
</style>
